import React, { useMemo, useState } from 'react';
import { View, StyleSheet, Switch } from 'react-native';
import { Layout, UI, useThemeColors, Empty } from '@gaozh1024/rn-toolkit';

const EmptyTestScreen: React.FC = () => {
    const colors = useThemeColors();

    const styles = StyleSheet.create({
        section: { marginBottom: 16 },
        row: { flexDirection: 'row', alignItems: 'center', gap: 12, flexWrap: 'wrap' },
        col: { gap: 12 },
        card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
        bordered: { borderWidth: 1, borderColor: colors.border, borderRadius: 8, padding: 12 },
    });

    // 行为与样式配置
    const [align, setAlign] = useState<'center' | 'start'>('center');
    const [fullHeight, setFullHeight] = useState<boolean>(true);
    const [spacingStr, setSpacingStr] = useState<string>('8');

    // 文案与图标
    const [title, setTitle] = useState<string>('暂无数据');
    const [description, setDescription] = useState<string>('当前列表为空，请稍后重试或添加数据');
    const [actionText, setActionText] = useState<string>('添加数据');

    // 交互结果
    const [lastAction, setLastAction] = useState<string>('-');
    const [primaryCount, setPrimaryCount] = useState<number>(0);
    const [secondaryCount, setSecondaryCount] = useState<number>(0);

    const spacing = useMemo(() => {
        const v = parseInt(spacingStr);
        return Number.isFinite(v) ? v : 8;
    }, [spacingStr]);

    const iconEl = useMemo(() => (
        <UI.Icon name="image-outline" size={56} color={colors.subtext} />
    ), [colors.subtext]);

    return (
        <Layout.Page
            headerShown
            headerProps={{ title: 'Empty 测试', backVisible: true }}
            padding={16}
            scrollable
            testID="EmptyTestScreen"
        >
            {/* 文案与样式 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>文案与样式</UI.Text>
                    <View style={styles.col}>
                        <UI.Text children={'标题（title）'} />
                        <UI.Input
                            value={title}
                            onChangeText={setTitle}
                            placeholder="暂无数据"
                            testID="input-title"
                        />
                        <UI.Text children={'描述（description）'} />
                        <UI.Input
                            value={description}
                            onChangeText={setDescription}
                            placeholder="当前列表为空，请稍后重试或添加数据"
                            testID="input-description"
                        />
                        <UI.Text children={'单按钮文案（actionText）'} />
                        <UI.Input
                            value={actionText}
                            onChangeText={setActionText}
                            placeholder="添加数据"
                            testID="input-action-text"
                        />
                        <UI.Text children={'间距（spacing，整数）'} />
                        <UI.Input
                            value={spacingStr}
                            onChangeText={setSpacingStr}
                            placeholder="8"
                            keyboardType="numeric"
                            testID="input-spacing"
                        />
                    </View>
                    <View style={[styles.row, { marginTop: 12 }]}>
                        <UI.Button
                            title="对齐：居中"
                            variant={align === 'center' ? 'primary' : 'outline'}
                            onPress={() => setAlign('center')}
                            testID="btn-align-center"
                        />
                        <UI.Button
                            title="对齐：起始"
                            variant={align === 'start' ? 'primary' : 'outline'}
                            onPress={() => setAlign('start')}
                            testID="btn-align-start"
                        />
                        <UI.Text variant="body2" color="textSecondary">占满高度（fullHeight）</UI.Text>
                        <Switch value={fullHeight} onValueChange={setFullHeight} testID="switch-fullHeight" />
                    </View>
                </Layout.Card>
            </View>

            {/* 基础用法：单按钮 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法（单按钮）</UI.Text>
                    <Empty
                        icon={iconEl}
                        title={title}
                        description={description}
                        actionText={actionText}
                        onAction={() => setLastAction(`单按钮点击：${actionText}`)}
                        align={align}
                        spacing={spacing}
                        fullHeight={fullHeight}
                    />
                    <View style={[styles.bordered, { marginTop: 12 }]}>
                        <UI.Text variant="caption" color="subtext" mb={8}>交互结果：</UI.Text>
                        <UI.Text variant="body1" color="text" testID="text-last-action">{lastAction}</UI.Text>
                    </View>
                </Layout.Card>
            </View>

            {/* 多按钮用法：primary + secondary */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>多按钮用法（actions）</UI.Text>
                    <Empty
                        icon={iconEl}
                        title="没有搜索结果"
                        description="试试调整关键字或过滤参数"
                        actions={[
                            { text: '刷新', type: 'primary', onPress: () => setPrimaryCount((n) => n + 1) },
                            { text: '去设置', type: 'secondary', onPress: () => setSecondaryCount((n) => n + 1) },
                        ]}
                        align={align}
                        spacing={spacing}
                        fullHeight={fullHeight}
                    />
                    <View style={[styles.bordered, { marginTop: 12 }]}>
                        <UI.Text variant="body1" color="text" testID="text-primary-count">刷新点击计数：{primaryCount}</UI.Text>
                        <UI.Text variant="body1" color="text" testID="text-secondary-count">去设置点击计数：{secondaryCount}</UI.Text>
                    </View>
                </Layout.Card>
            </View>

            {/* 样式覆盖：不占满高度 + 自定义容器样式 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>样式覆盖（style / fullHeight=false）</UI.Text>
                    <Empty
                        title="列表为空"
                        description="当仅需要简单提示时，可关闭占满高度"
                        align="start"
                        spacing={spacing}
                        fullHeight={false}
                        style={{ paddingHorizontal: 12 }}
                    />
                </Layout.Card>
            </View>

            {/* 无图标场景 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>无图标场景</UI.Text>
                    <Empty
                        title="暂无消息"
                        description="你可以稍后再来查看新的通知"
                        actionText="去首页"
                        onAction={() => setLastAction('跳转首页')}
                        align="center"
                        spacing={spacing}
                        fullHeight={false}
                    />
                </Layout.Card>
            </View>
        </Layout.Page>
    );
};

export default EmptyTestScreen;